<template>
  <div>
    <div class="affix" style="top: 200px; right: 0; width: 200px; z-index: 1000">
      <div class="card card-success">
        <div class="card-header with-border">
          <h3 class="card-title">affix</h3>
          <div class="card-tools btn-group-xs float-right">
            <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
            <button type="button" class="btn btn-card-tool" data-widget="collapse">
              <font-awesome-icon icon="minus" />
            </button>
            <button
              type="button"
              class="btn btn-card-tool"
              data-toggle="tooltip"
              title="Contacts"
              data-widget="chat-pane-toggle"
            >
              <font-awesome-icon icon="comments" />
            </button>
            <button type="button" class="btn btn-card-tool" data-widget="remove">
              <font-awesome-icon icon="times" />
            </button>
          </div>
        </div>
        <!-- /.card-header -->
        <div class="card-body">
          <ul class="list-group">
            <li class="list-group-item">免费域名注册</li>
            <li class="list-group-item">免费 Window 空间托管</li>
          </ul>
        </div>
        <!-- /.card-body -->
      </div>
    </div>
    <div class="row">
      <div style="padding: 100px 100px 10px">
        <form>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">@</span>
            </div>
            <input type="text" class="form-control" placeholder="Username" />
          </div>

          <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="Your Email" />
            <div class="input-group-append">
              <span class="input-group-text">@runoob.com</span>
            </div>
          </div>
        </form>
        <!-- 多个输入框 -->
        <form>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">Person</span>
            </div>
            <input type="text" class="form-control" placeholder="First Name" />
            <input type="text" class="form-control" placeholder="Last Name" />
          </div>
        </form>

        <!-- 多个文本信息 -->
        <form>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">One</span>
              <span class="input-group-text">Two</span>
              <span class="input-group-text">Three</span>
            </div>
            <input type="text" class="form-control" />
          </div>
        </form>
      </div>
      <div class="col-md-6">
        <form class="form-horizontal" role="form">
          <div class="form-group">
            <label for="firstname" class="col-sm-2 control-label">名字</label>
            <div class="col-sm-10">
              <input id="firstname" type="text" class="form-control" placeholder="请输入名字" />
            </div>
          </div>
          <div class="form-group">
            <label for="lastname" class="col-sm-2 control-label">姓</label>
            <div class="col-sm-10">
              <input id="lastname" type="text" class="form-control" placeholder="请输入姓" />
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <label> <input type="checkbox" />请记住我 </label>
              </div>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <button type="submit" class="btn btn-default">登录</button>
            </div>
          </div>
        </form>
        <form role="form">
          <div class="form-group">
            <label for="name">名称</label>
            <input id="name" type="text" class="form-control" placeholder="请输入名称" />
          </div>
          <div class="form-group">
            <label for="inputfile">文件输入</label>
            <input id="inputfile" type="file" />
            <p class="help-block">这里是块级帮助文本的实例。</p>
          </div>
          <div class="checkbox">
            <label> <input type="checkbox" />请打勾 </label>
          </div>
          <button type="submit" class="btn btn-default">提交</button>
        </form>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="card card-success">
          <div class="card-header with-border">
            <h3 class="card-title">List Group</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <ul class="list-group">
              <li class="list-group-item">免费域名注册</li>
              <li class="list-group-item">免费 Window 空间托管</li>
              <li class="list-group-item active">图像的数量</li>
              <li class="list-group-item">
                <span class="badge">新</span>
                24*7 支持
              </li>
              <li class="list-group-item">每年更新成本</li>
              <li class="list-group-item">
                <span class="badge">新</span>
                折扣优惠
              </li>
            </ul>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="card card-warning">
          <div class="card-header with-border">
            <h3 class="card-title">Text</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge card-warning">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <span class="text-primary-extra-light">免费域名注册</span>
            <span class="text-primary-lighter">免费域名注册</span>
            <span class="text-primary-light">免费域名注册</span>
            <span class="text-primary">免费域名注册</span>
            <span class="text-primary-dark">免费域名注册</span>
            <span class="text-primary-darker">免费域名注册</span>
            <span class="text-primary-extra-dark">免费域名注册</span>

            <span class="text-success-extra-light">免费域名注册</span>
            <span class="text-success-lighter">免费域名注册</span>
            <span class="text-success-light">免费域名注册</span>
            <span class="text-success">免费域名注册</span>
            <span class="text-success-dark">免费域名注册</span>
            <span class="text-success-darker">免费域名注册</span>
            <span class="text-success-extra-dark">免费域名注册</span>

            <span class="text-warning-extra-light">免费域名注册</span>
            <span class="text-warning-lighter">免费域名注册</span>
            <span class="text-warning-light">免费域名注册</span>
            <span class="text-warning">免费域名注册</span>
            <span class="text-warning-dark">免费域名注册</span>
            <span class="text-warning-darker">免费域名注册</span>
            <span class="text-warning-extra-dark">免费域名注册</span>

            <span class="text-danger-extra-light">免费域名注册</span>
            <span class="text-danger-lighter">免费域名注册</span>
            <span class="text-danger-light">免费域名注册</span>
            <span class="text-danger">免费域名注册</span>
            <span class="text-danger-dark">免费域名注册</span>
            <span class="text-danger-darker">免费域名注册</span>
            <span class="text-danger-extra-dark">免费域名注册</span>

            <span class="text-info-extra-light">免费域名注册</span>
            <span class="text-info-lighter">免费域名注册</span>
            <span class="text-info-light">免费域名注册</span>
            <span class="text-info">免费域名注册</span>
            <span class="text-info-dark">免费域名注册</span>
            <span class="text-info-darker">免费域名注册</span>
            <span class="text-info-extra-dark">免费域名注册</span>

            <span class="text-default-extra-light">免费域名注册</span>
            <span class="text-default-lighter">免费域名注册</span>
            <span class="text-default-light">免费域名注册</span>
            <span class="text-default">免费域名注册</span>
            <span class="text-default-dark">免费域名注册</span>
            <span class="text-default-darker">免费域名注册</span>
            <span class="text-default-extra-dark">免费域名注册</span>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="card card-danger">
          <div class="card-header with-border">
            <h3 class="card-title">bg</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <span class="bg-primary-extra-light">免费域名注册</span>
            <span class="bg-primary-lighter">免费域名注册</span>
            <span class="bg-primary-light">免费域名注册</span>
            <span class="bg-primary">免费域名注册</span>
            <span class="bg-primary-dark">免费域名注册</span>
            <span class="bg-primary-darker">免费域名注册</span>
            <span class="bg-primary-extra-dark">免费域名注册</span>

            <span class="bg-success-extra-light">免费域名注册</span>
            <span class="bg-success-lighter">免费域名注册</span>
            <span class="bg-success-light">免费域名注册</span>
            <span class="bg-success">免费域名注册</span>
            <span class="bg-success-dark">免费域名注册</span>
            <span class="bg-success-darker">免费域名注册</span>
            <span class="bg-success-extra-dark">免费域名注册</span>

            <span class="bg-warning-extra-light">免费域名注册</span>
            <span class="bg-warning-lighter">免费域名注册</span>
            <span class="bg-warning-light">免费域名注册</span>
            <span class="bg-warning">免费域名注册</span>
            <span class="bg-warning-dark">免费域名注册</span>
            <span class="bg-warning-darker">免费域名注册</span>
            <span class="bg-warning-extra-dark">免费域名注册</span>

            <span class="bg-danger-extra-light">免费域名注册</span>
            <span class="bg-danger-lighter">免费域名注册</span>
            <span class="bg-danger-light">免费域名注册</span>
            <span class="bg-danger">免费域名注册</span>
            <span class="bg-danger-dark">免费域名注册</span>
            <span class="bg-danger-darker">免费域名注册</span>
            <span class="bg-danger-extra-dark">免费域名注册</span>

            <span class="bg-info-extra-light">免费域名注册</span>
            <span class="bg-info-lighter">免费域名注册</span>
            <span class="bg-info-light">免费域名注册</span>
            <span class="bg-info">免费域名注册</span>
            <span class="bg-info-dark">免费域名注册</span>
            <span class="bg-info-darker">免费域名注册</span>
            <span class="bg-info-extra-dark">免费域名注册</span>

            <span class="bg-default-extra-light">免费域名注册</span>
            <span class="bg-default-lighter">免费域名注册</span>
            <span class="bg-default-light">免费域名注册</span>
            <span class="bg-default">免费域名注册</span>
            <span class="bg-default-dark">免费域名注册</span>
            <span class="bg-default-darker">免费域名注册</span>
            <span class="bg-default-extra-dark">免费域名注册</span>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="card card-info">
          <div class="card-header with-border">
            <h3 class="card-title">List Group</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <table class="table table-hover table-bordered">
              <caption>
                悬停表格布局
              </caption>
              <thead>
                <tr class="bg-success">
                  <th>名称</th>
                  <th>城市</th>
                  <th>邮编</th>
                </tr>
              </thead>
              <tbody>
                <tr class="active">
                  <td>Tanmay</td>
                  <td>Bangalore</td>
                  <td>560001</td>
                </tr>
                <tr class="bg-danger-lighter">
                  <td>Sachin</td>
                  <td>Mumbai</td>
                  <td>400003</td>
                </tr>
                <tr>
                  <td>Uma</td>
                  <td>Pune</td>
                  <td>411027</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="card card-default">
          <div class="card-header with-border">
            <h3 class="card-title">List Group</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <!-- <img src="@/assets/img/user1-128x128.jpg" class="img-rounded">
            <img src="@/assets/img/user1-128x128.jpg" class="img-circle">
            <img src="@/assets/img/user1-128x128.jpg" class="img-thumbnail"> -->
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="card card-primary">
          <div class="card-header with-border">
            <h3 class="card-title">Table</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <table class="table table-hover">
              <caption>
                上下文表格布局
              </caption>
              <thead>
                <tr>
                  <th>产品</th>
                  <th>付款日期</th>
                  <th>状态</th>
                </tr>
              </thead>
              <tbody>
                <tr class="active">
                  <td>产品1</td>
                  <td>23/11/2013</td>
                  <td>待发货</td>
                </tr>
                <tr class="success">
                  <td>产品2</td>
                  <td>10/11/2013</td>
                  <td>发货中</td>
                </tr>
                <tr class="warning">
                  <td>产品3</td>
                  <td>20/10/2013</td>
                  <td>待确认</td>
                </tr>
                <tr class="danger">
                  <td>产品4</td>
                  <td>20/10/2013</td>
                  <td>已退货</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="card card-success">
          <div class="card-header with-border">
            <h3 class="card-title">List Group</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <ul class="list-group">
              <li class="list-group-item">免费域名注册</li>
              <li class="list-group-item">免费 Window 空间托管</li>
              <li class="list-group-item active">图像的数量</li>
              <li class="list-group-item">
                <span class="badge">新</span>
                24*7 支持
              </li>
              <li class="list-group-item">每年更新成本</li>
              <li class="list-group-item">
                <span class="badge">新</span>
                折扣优惠
              </li>
            </ul>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="card card-warning">
          <div class="card-header with-border">
            <h3 class="card-title">Text</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge card-warning">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <span class="text-primary-extra-light">免费域名注册</span>
            <span class="text-primary-lighter">免费域名注册</span>
            <span class="text-primary-light">免费域名注册</span>
            <span class="text-primary">免费域名注册</span>
            <span class="text-primary-dark">免费域名注册</span>
            <span class="text-primary-darker">免费域名注册</span>
            <span class="text-primary-extra-dark">免费域名注册</span>

            <span class="text-success-extra-light">免费域名注册</span>
            <span class="text-success-lighter">免费域名注册</span>
            <span class="text-success-light">免费域名注册</span>
            <span class="text-success">免费域名注册</span>
            <span class="text-success-dark">免费域名注册</span>
            <span class="text-success-darker">免费域名注册</span>
            <span class="text-success-extra-dark">免费域名注册</span>

            <span class="text-warning-extra-light">免费域名注册</span>
            <span class="text-warning-lighter">免费域名注册</span>
            <span class="text-warning-light">免费域名注册</span>
            <span class="text-warning">免费域名注册</span>
            <span class="text-warning-dark">免费域名注册</span>
            <span class="text-warning-darker">免费域名注册</span>
            <span class="text-warning-extra-dark">免费域名注册</span>

            <span class="text-danger-extra-light">免费域名注册</span>
            <span class="text-danger-lighter">免费域名注册</span>
            <span class="text-danger-light">免费域名注册</span>
            <span class="text-danger">免费域名注册</span>
            <span class="text-danger-dark">免费域名注册</span>
            <span class="text-danger-darker">免费域名注册</span>
            <span class="text-danger-extra-dark">免费域名注册</span>

            <span class="text-info-extra-light">免费域名注册</span>
            <span class="text-info-lighter">免费域名注册</span>
            <span class="text-info-light">免费域名注册</span>
            <span class="text-info">免费域名注册</span>
            <span class="text-info-dark">免费域名注册</span>
            <span class="text-info-darker">免费域名注册</span>
            <span class="text-info-extra-dark">免费域名注册</span>

            <span class="text-default-extra-light">免费域名注册</span>
            <span class="text-default-lighter">免费域名注册</span>
            <span class="text-default-light">免费域名注册</span>
            <span class="text-default">免费域名注册</span>
            <span class="text-default-dark">免费域名注册</span>
            <span class="text-default-darker">免费域名注册</span>
            <span class="text-default-extra-dark">免费域名注册</span>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="card card-danger">
          <div class="card-header with-border">
            <h3 class="card-title">bg</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <span class="bg-primary-extra-light">免费域名注册</span>
            <span class="bg-primary-lighter">免费域名注册</span>
            <span class="bg-primary-light">免费域名注册</span>
            <span class="bg-primary">免费域名注册</span>
            <span class="bg-primary-dark">免费域名注册</span>
            <span class="bg-primary-darker">免费域名注册</span>
            <span class="bg-primary-extra-dark">免费域名注册</span>

            <span class="bg-success-extra-light">免费域名注册</span>
            <span class="bg-success-lighter">免费域名注册</span>
            <span class="bg-success-light">免费域名注册</span>
            <span class="bg-success">免费域名注册</span>
            <span class="bg-success-dark">免费域名注册</span>
            <span class="bg-success-darker">免费域名注册</span>
            <span class="bg-success-extra-dark">免费域名注册</span>

            <span class="bg-warning-extra-light">免费域名注册</span>
            <span class="bg-warning-lighter">免费域名注册</span>
            <span class="bg-warning-light">免费域名注册</span>
            <span class="bg-warning">免费域名注册</span>
            <span class="bg-warning-dark">免费域名注册</span>
            <span class="bg-warning-darker">免费域名注册</span>
            <span class="bg-warning-extra-dark">免费域名注册</span>

            <span class="bg-danger-extra-light">免费域名注册</span>
            <span class="bg-danger-lighter">免费域名注册</span>
            <span class="bg-danger-light">免费域名注册</span>
            <span class="bg-danger">免费域名注册</span>
            <span class="bg-danger-dark">免费域名注册</span>
            <span class="bg-danger-darker">免费域名注册</span>
            <span class="bg-danger-extra-dark">免费域名注册</span>

            <span class="bg-info-extra-light">免费域名注册</span>
            <span class="bg-info-lighter">免费域名注册</span>
            <span class="bg-info-light">免费域名注册</span>
            <span class="bg-info">免费域名注册</span>
            <span class="bg-info-dark">免费域名注册</span>
            <span class="bg-info-darker">免费域名注册</span>
            <span class="bg-info-extra-dark">免费域名注册</span>

            <span class="bg-default-extra-light">免费域名注册</span>
            <span class="bg-default-lighter">免费域名注册</span>
            <span class="bg-default-light">免费域名注册</span>
            <span class="bg-default">免费域名注册</span>
            <span class="bg-default-dark">免费域名注册</span>
            <span class="bg-default-darker">免费域名注册</span>
            <span class="bg-default-extra-dark">免费域名注册</span>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="card card-info">
          <div class="card-header with-border">
            <h3 class="card-title">List Group</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <table class="table table-hover table-bordered">
              <caption>
                悬停表格布局
              </caption>
              <thead>
                <tr class="bg-success">
                  <th>名称</th>
                  <th>城市</th>
                  <th>邮编</th>
                </tr>
              </thead>
              <tbody>
                <tr class="active">
                  <td>Tanmay</td>
                  <td>Bangalore</td>
                  <td>560001</td>
                </tr>
                <tr class="bg-danger-lighter">
                  <td>Sachin</td>
                  <td>Mumbai</td>
                  <td>400003</td>
                </tr>
                <tr>
                  <td>Uma</td>
                  <td>Pune</td>
                  <td>411027</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="card card-default">
          <div class="card-header with-border">
            <h3 class="card-title">List Group</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <!-- <img src="@/assets/img/user1-128x128.jpg" class="img-rounded">
            <img src="@/assets/img/user1-128x128.jpg" class="img-circle">
            <img src="@/assets/img/user1-128x128.jpg" class="img-thumbnail"> -->
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="card card-primary">
          <div class="card-header with-border">
            <h3 class="card-title">内联子标题</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <h1>我是标题1 h1. <small class="small">我是副标题1 h1</small></h1>
            <h2>我是标题2 h2. <small>我是副标题2 h2</small></h2>
            <h3>我是标题3 h3. <small>我是副标题3 h3</small></h3>
            <h4>我是标题4 h4. <small>我是副标题4 h4</small></h4>
            <h5>我是标题5 h5. <small>我是副标题5 h5</small></h5>
            <h6>我是标题6 h6. <small>我是副标题6 h6</small></h6>
            <p class="text-left">向左对齐文本</p>
            <p class="text-center">居中对齐文本</p>
            <p class="text-right">向右对齐文本</p>
            <abbr title="World Wide Web">WWW</abbr><br />
            <abbr title="Real Simple Syndication" class="initialism">RSS</abbr>
            <address>
              <strong>Some Company, Inc.</strong><br />
              007 street<br />
              Some City, State XXXXX<br />
              <abbr title="Phone">P:</abbr> (123) 456-7890
            </address>
            <address>
              <strong>Full Name</strong><br />
              <a href="mailto:#">mailto@somedomain.com</a>
            </address>
            <blockquote class="blockquote">
              <p>
                这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。这是一个默认的引用实例。
              </p>
            </blockquote>
            <blockquote class="blockquote">
              这是一个带有源标题的引用。
              <small class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></small>
            </blockquote>
            <blockquote class="blockquote blockquote-reverse">
              这是一个向右对齐的引用。
              <small class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></small>
            </blockquote>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="card card-success">
          <div class="card-header with-border">
            <h3 class="card-title">List Group</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <ul class="list-group">
              <li class="list-group-item">免费域名注册</li>
              <li class="list-group-item">免费 Window 空间托管</li>
              <li class="list-group-item active">图像的数量</li>
              <li class="list-group-item">
                <span class="badge">新</span>
                24*7 支持
              </li>
              <li class="list-group-item">每年更新成本</li>
              <li class="list-group-item">
                <span class="badge">新</span>
                折扣优惠
              </li>
            </ul>

            <h4>有序列表</h4>
            <ol>
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
              <li>Item 4</li>
            </ol>
            <h4>无序列表</h4>
            <ul>
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
              <li>Item 4</li>
            </ul>
            <h4>未定义样式列表</h4>
            <ul class="list-unstyled">
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
              <li>Item 4</li>
            </ul>
            <h4>内联列表</h4>
            <ul class="list-inline">
              <li>Item 1</li>
              <li>Item 2</li>
              <li>Item 3</li>
              <li>Item 4</li>
            </ul>
            <h4>定义列表</h4>
            <dl>
              <dt>Description 1</dt>
              <dd>Item 1</dd>
              <dt>Description 2</dt>
              <dd>Item 2</dd>
            </dl>
            <h4>水平的定义列表</h4>
            <dl class="dl-horizontal">
              <dt>Description 1</dt>
              <dd>Item 1</dd>
              <dt>Description 2</dt>
              <dd>Item 2</dd>
            </dl>
          </div>
          <p><code>&lt;header&gt;</code> 作为内联元素被包围。</p>
          <p>使用 <kbd>ctrl + p</kbd> 来打开打印窗口。</p>
          <p>使用 var 元素表示变量：</p>
          <p><var>x</var> = <var>a</var><var>b</var> + <var>y</var></p>
          <p>如果需要把代码显示为一个独立的块元素，请使用 &lt;pre&gt; 标签：</p>
          <pre>
              &lt;article&gt;
                  &lt;h1&gt;Article Heading&lt;/h1&gt;
              &lt;/article&gt;
          </pre>
          <pre class="pre-scrollable">
在 pre 元素中的文本
	宽度的显示与文本的宽度一样，
	保留了  空  格 和

	换行。</pre
          >
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="card card-warning">
          <div class="card-header with-border">
            <h3 class="card-title">Text</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge card-warning">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <span class="text-primary-extra-light">免费域名注册</span>
            <span class="text-primary-lighter">免费域名注册</span>
            <span class="text-primary-light">免费域名注册</span>
            <span class="text-primary">免费域名注册</span>
            <span class="text-primary-dark">免费域名注册</span>
            <span class="text-primary-darker">免费域名注册</span>
            <span class="text-primary-extra-dark">免费域名注册</span>

            <span class="text-success-extra-light">免费域名注册</span>
            <span class="text-success-lighter">免费域名注册</span>
            <span class="text-success-light">免费域名注册</span>
            <span class="text-success">免费域名注册</span>
            <span class="text-success-dark">免费域名注册</span>
            <span class="text-success-darker">免费域名注册</span>
            <span class="text-success-extra-dark">免费域名注册</span>

            <span class="text-warning-extra-light">免费域名注册</span>
            <span class="text-warning-lighter">免费域名注册</span>
            <span class="text-warning-light">免费域名注册</span>
            <span class="text-warning">免费域名注册</span>
            <span class="text-warning-dark">免费域名注册</span>
            <span class="text-warning-darker">免费域名注册</span>
            <span class="text-warning-extra-dark">免费域名注册</span>

            <span class="text-danger-extra-light">免费域名注册</span>
            <span class="text-danger-lighter">免费域名注册</span>
            <span class="text-danger-light">免费域名注册</span>
            <span class="text-danger">免费域名注册</span>
            <span class="text-danger-dark">免费域名注册</span>
            <span class="text-danger-darker">免费域名注册</span>
            <span class="text-danger-extra-dark">免费域名注册</span>

            <span class="text-info-extra-light">免费域名注册</span>
            <span class="text-info-lighter">免费域名注册</span>
            <span class="text-info-light">免费域名注册</span>
            <span class="text-info">免费域名注册</span>
            <span class="text-info-dark">免费域名注册</span>
            <span class="text-info-darker">免费域名注册</span>
            <span class="text-info-extra-dark">免费域名注册</span>

            <span class="text-default-extra-light">免费域名注册</span>
            <span class="text-default-lighter">免费域名注册</span>
            <span class="text-default-light">免费域名注册</span>
            <span class="text-default">免费域名注册</span>
            <span class="text-default-dark">免费域名注册</span>
            <span class="text-default-darker">免费域名注册</span>
            <span class="text-default-extra-dark">免费域名注册</span>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="card card-danger">
          <div class="card-header with-border">
            <h3 class="card-title">bg</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <span class="bg-primary-extra-light">免费域名注册</span>
            <span class="bg-primary-lighter">免费域名注册</span>
            <span class="bg-primary-light">免费域名注册</span>
            <span class="bg-primary">免费域名注册</span>
            <span class="bg-primary-dark">免费域名注册</span>
            <span class="bg-primary-darker">免费域名注册</span>
            <span class="bg-primary-extra-dark">免费域名注册</span>

            <span class="bg-success-extra-light">免费域名注册</span>
            <span class="bg-success-lighter">免费域名注册</span>
            <span class="bg-success-light">免费域名注册</span>
            <span class="bg-success">免费域名注册</span>
            <span class="bg-success-dark">免费域名注册</span>
            <span class="bg-success-darker">免费域名注册</span>
            <span class="bg-success-extra-dark">免费域名注册</span>

            <span class="bg-warning-extra-light">免费域名注册</span>
            <span class="bg-warning-lighter">免费域名注册</span>
            <span class="bg-warning-light">免费域名注册</span>
            <span class="bg-warning">免费域名注册</span>
            <span class="bg-warning-dark">免费域名注册</span>
            <span class="bg-warning-darker">免费域名注册</span>
            <span class="bg-warning-extra-dark">免费域名注册</span>

            <span class="bg-danger-extra-light">免费域名注册</span>
            <span class="bg-danger-lighter">免费域名注册</span>
            <span class="bg-danger-light">免费域名注册</span>
            <span class="bg-danger">免费域名注册</span>
            <span class="bg-danger-dark">免费域名注册</span>
            <span class="bg-danger-darker">免费域名注册</span>
            <span class="bg-danger-extra-dark">免费域名注册</span>

            <span class="bg-info-extra-light">免费域名注册</span>
            <span class="bg-info-lighter">免费域名注册</span>
            <span class="bg-info-light">免费域名注册</span>
            <span class="bg-info">免费域名注册</span>
            <span class="bg-info-dark">免费域名注册</span>
            <span class="bg-info-darker">免费域名注册</span>
            <span class="bg-info-extra-dark">免费域名注册</span>

            <span class="bg-default-extra-light">免费域名注册</span>
            <span class="bg-default-lighter">免费域名注册</span>
            <span class="bg-default-light">免费域名注册</span>
            <span class="bg-default">免费域名注册</span>
            <span class="bg-default-dark">免费域名注册</span>
            <span class="bg-default-darker">免费域名注册</span>
            <span class="bg-default-extra-dark">免费域名注册</span>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="card card-info">
          <div class="card-header with-border">
            <h3 class="card-title">List Group</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <table class="table table-hover table-bordered">
              <caption>
                悬停表格布局
              </caption>
              <thead>
                <tr class="bg-success">
                  <th>名称</th>
                  <th>城市</th>
                  <th>邮编</th>
                </tr>
              </thead>
              <tbody>
                <tr class="active">
                  <td>Tanmay</td>
                  <td>Bangalore</td>
                  <td>560001</td>
                </tr>
                <tr class="bg-danger-lighter">
                  <td>Sachin</td>
                  <td>Mumbai</td>
                  <td>400003</td>
                </tr>
                <tr>
                  <td>Uma</td>
                  <td>Pune</td>
                  <td>411027</td>
                </tr>
              </tbody>
            </table>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
      <div class="col-md-6">
        <div class="card card-default">
          <div class="card-header with-border">
            <h3 class="card-title">List Group</h3>
            <div class="card-tools btn-group-xs float-right">
              <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
              <button type="button" class="btn btn-card-tool" data-widget="collapse">
                <font-awesome-icon icon="minus" />
              </button>
              <button
                type="button"
                class="btn btn-card-tool"
                data-toggle="tooltip"
                title="Contacts"
                data-widget="chat-pane-toggle"
              >
                <font-awesome-icon icon="comments" />
              </button>
              <button type="button" class="btn btn-card-tool" data-widget="remove">
                <font-awesome-icon icon="times" />
              </button>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">
            <!-- <img src="@/assets/img/user1-128x128.jpg" class="img-rounded">
            <img src="@/assets/img/user1-128x128.jpg" class="img-circle">
            <img src="@/assets/img/user1-128x128.jpg" class="img-thumbnail">d -->
            <div class="dropdown">
              <button id="dropdownMenu1" type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                主题
                <span class="caret" />
              </button>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="#">Java</a>
                </li>
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
                </li>
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="#">数据通信/网络</a>
                </li>
                <li role="presentation" class="divider" />
                <li role="presentation">
                  <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
                </li>
              </ul>
            </div>
          </div>
          <!-- /.card-body -->
        </div>
      </div>
      <!-- /.col -->
    </div>

    <!-- Main content -->
    <section class="content">
      <!-- Direct Chat -->
      <div class="row">
        <div class="col-md-3">
          <!-- DIRECT CHAT PRIMARY -->
          <div class="card card-primary direct-chat direct-chat-primary">
            <div class="card-header with-border">
              <h3 class="card-title">Direct Chat</h3>

              <div class="card-tools btn-group-xs float-right">
                <span data-toggle="tooltip" title="3 New Messages" class="badge bg-primary">3</span>
                <button type="button" class="btn btn-card-tool" data-widget="collapse">
                  <font-awesome-icon icon="minus" />
                </button>
                <button
                  type="button"
                  class="btn btn-card-tool"
                  data-toggle="tooltip"
                  title="Contacts"
                  data-widget="chat-pane-toggle"
                >
                  <font-awesome-icon icon="comments" />
                </button>
                <button type="button" class="btn btn-card-tool" data-widget="remove">
                  <font-awesome-icon icon="times" />
                </button>
              </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <!-- Conversations are loaded here -->
              <div class="direct-chat-messages">
                <!-- Message. Default to the left -->
                <div class="direct-chat-msg">
                  <div class="direct-chat-info clearfix">
                    <span class="direct-chat-name float-left">Alexander Pierce</span>
                    <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
                  </div>
                  <!-- /.direct-chat-info -->
                  <img class="direct-chat-img" src="@/assets/img/user1-128x128.jpg" alt="Message User Image" />
                  <!-- /.direct-chat-img -->
                  <div class="direct-chat-text">Is this template really for free? That's unbelievable!</div>
                  <!-- /.direct-chat-text -->
                </div>
                <!-- /.direct-chat-msg -->

                <!-- Message to the right -->
                <div class="direct-chat-msg right">
                  <div class="direct-chat-info clearfix">
                    <span class="direct-chat-name float-right">Sarah Bullock</span>
                    <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
                  </div>
                  <!-- /.direct-chat-info -->
                  <!-- <img class="direct-chat-img" src="@/assets/img/user1-128x128.jpg" alt="Message User Image"> -->
                  <!-- /.direct-chat-img -->
                  <div class="direct-chat-text">You better believe it!</div>
                  <!-- /.direct-chat-text -->
                </div>
                <!-- /.direct-chat-msg -->
              </div>
              <!--/.direct-chat-messages-->

              <!-- Contacts are loaded here -->
              <div class="direct-chat-contacts">
                <ul class="contacts-list">
                  <li>
                    <a href="#">
                      <!-- <img class="contacts-list-img" src="@/assets/img/user1-128x128.jpg" alt="User Image"> -->

                      <div class="contacts-list-info">
                        <span class="contacts-list-name">
                          Count Dracula
                          <small class="contacts-list-date float-right">2/28/2015</small>
                        </span>
                        <span class="contacts-list-msg">How have you been? I was...</span>
                      </div>
                      <!-- /.contacts-list-info -->
                    </a>
                  </li>
                  <!-- End Contact Item -->
                </ul>
                <!-- /.contatcts-list -->
              </div>
              <!-- /.direct-chat-pane -->
            </div>
            <!-- /.card-body -->
            <div class="card-footer">
              <form action="#" method="post">
                <div class="input-group">
                  <input type="text" name="message" placeholder="Type Message ..." class="form-control" />
                  <span class="input-group-append">
                    <button type="submit" class="btn btn-primary btn-flat">Send</button>
                  </span>
                </div>
              </form>
            </div>
            <!-- /.card-footer-->
          </div>
          <!--/.direct-chat -->
        </div>
        <!-- /.col -->

        <div class="col-md-3">
          <!-- DIRECT CHAT SUCCESS -->
          <div class="card card-success direct-chat direct-chat-success">
            <div class="card-header with-border">
              <h3 class="card-title">Direct Chat</h3>

              <div class="card-tools btn-group-xs float-right">
                <span data-toggle="tooltip" title="3 New Messages" class="badge bg-success">3</span>
                <button type="button" class="btn btn-card-tool" data-widget="collapse">
                  <font-awesome-icon icon="minus" />
                </button>
                <button
                  type="button"
                  class="btn btn-card-tool"
                  data-toggle="tooltip"
                  title="Contacts"
                  data-widget="chat-pane-toggle"
                >
                  <font-awesome-icon icon="comments" />
                </button>
                <button type="button" class="btn btn-card-tool" data-widget="remove">
                  <font-awesome-icon icon="times" />
                </button>
              </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <!-- Conversations are loaded here -->
              <div class="direct-chat-messages">
                <!-- Message. Default to the left -->
                <div class="direct-chat-msg">
                  <div class="direct-chat-info clearfix">
                    <span class="direct-chat-name float-left">Alexander Pierce</span>
                    <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
                  </div>
                  <!-- /.direct-chat-info -->
                  <img class="direct-chat-img" src="@/assets/img/user1-128x128.jpg" alt="Message User Image" />
                  <!-- /.direct-chat-img -->
                  <div class="direct-chat-text">Is this template really for free? That's unbelievable!</div>
                  <!-- /.direct-chat-text -->
                </div>
                <!-- /.direct-chat-msg -->

                <!-- Message to the right -->
                <div class="direct-chat-msg right">
                  <div class="direct-chat-info clearfix">
                    <span class="direct-chat-name float-right">Sarah Bullock</span>
                    <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
                  </div>
                  <!-- /.direct-chat-info -->
                  <img class="direct-chat-img" src="@/assets/img/user1-128x128.jpg" alt="Message User Image" />
                  <!-- /.direct-chat-img -->
                  <div class="direct-chat-text">You better believe it!</div>
                  <!-- /.direct-chat-text -->
                </div>
                <!-- /.direct-chat-msg -->
              </div>
              <!--/.direct-chat-messages-->

              <!-- Contacts are loaded here -->
              <div class="direct-chat-contacts">
                <ul class="contacts-list">
                  <li>
                    <a href="#">
                      <img class="contacts-list-img" src="@/assets/img/user1-128x128.jpg" alt="User Image" />

                      <div class="contacts-list-info">
                        <span class="contacts-list-name">
                          Count Dracula
                          <small class="contacts-list-date float-right">2/28/2015</small>
                        </span>
                        <span class="contacts-list-msg">How have you been? I was...</span>
                      </div>
                      <!-- /.contacts-list-info -->
                    </a>
                  </li>
                  <!-- End Contact Item -->
                </ul>
                <!-- /.contatcts-list -->
              </div>
              <!-- /.direct-chat-pane -->
            </div>
            <!-- /.card-body -->
            <div class="card-footer">
              <form action="#" method="post">
                <div class="input-group">
                  <input type="text" name="message" placeholder="Type Message ..." class="form-control" />
                  <span class="input-group-append">
                    <button type="submit" class="btn btn-success btn-flat">Send</button>
                  </span>
                </div>
              </form>
            </div>
            <!-- /.card-footer-->
          </div>
          <!--/.direct-chat -->
        </div>
        <!-- /.col -->

        <div class="col-md-3">
          <!-- DIRECT CHAT WARNING -->
          <div class="card card-warning direct-chat direct-chat-warning">
            <div class="card-header with-border">
              <h3 class="card-title">Direct Chat</h3>

              <div class="card-tools btn-group-xs float-right">
                <span data-toggle="tooltip" title="3 New Messages" class="badge bg-warning">3</span>
                <button type="button" class="btn btn-card-tool" data-widget="collapse">
                  <font-awesome-icon icon="minus" />
                </button>
                <button
                  type="button"
                  class="btn btn-card-tool"
                  data-toggle="tooltip"
                  title="Contacts"
                  data-widget="chat-pane-toggle"
                >
                  <font-awesome-icon icon="comments" />
                </button>
                <button type="button" class="btn btn-card-tool" data-widget="remove">
                  <font-awesome-icon icon="times" />
                </button>
              </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <!-- Conversations are loaded here -->
              <div class="direct-chat-messages">
                <!-- Message. Default to the left -->
                <div class="direct-chat-msg">
                  <div class="direct-chat-info clearfix">
                    <span class="direct-chat-name float-left">Alexander Pierce</span>
                    <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
                  </div>
                  <!-- /.direct-chat-info -->
                  <img class="direct-chat-img" src="@/assets/img/user1-128x128.jpg" alt="Message User Image" />
                  <!-- /.direct-chat-img -->
                  <div class="direct-chat-text">Is this template really for free? That's unbelievable!</div>
                  <!-- /.direct-chat-text -->
                </div>
                <!-- /.direct-chat-msg -->

                <!-- Message to the right -->
                <div class="direct-chat-msg right">
                  <div class="direct-chat-info clearfix">
                    <span class="direct-chat-name float-right">Sarah Bullock</span>
                    <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
                  </div>
                  <!-- /.direct-chat-info -->
                  <img class="direct-chat-img" src="@/assets/img/user1-128x128.jpg" alt="Message User Image" />
                  <!-- /.direct-chat-img -->
                  <div class="direct-chat-text">You better believe it!</div>
                  <!-- /.direct-chat-text -->
                </div>
                <!-- /.direct-chat-msg -->
              </div>
              <!--/.direct-chat-messages-->

              <!-- Contacts are loaded here -->
              <div class="direct-chat-contacts">
                <ul class="contacts-list">
                  <li>
                    <a href="#">
                      <img class="contacts-list-img" src="@/assets/img/user1-128x128.jpg" alt="User Image" />

                      <div class="contacts-list-info">
                        <span class="contacts-list-name">
                          Count Dracula
                          <small class="contacts-list-date float-right">2/28/2015</small>
                        </span>
                        <span class="contacts-list-msg">How have you been? I was...</span>
                      </div>
                      <!-- /.contacts-list-info -->
                    </a>
                  </li>
                  <!-- End Contact Item -->
                </ul>
                <!-- /.contatcts-list -->
              </div>
              <!-- /.direct-chat-pane -->
            </div>
            <!-- /.card-body -->
            <div class="card-footer">
              <form action="#" method="post">
                <div class="input-group">
                  <input type="text" name="message" placeholder="Type Message ..." class="form-control" />
                  <span class="input-group-append">
                    <button type="submit" class="btn btn-warning btn-flat">Send</button>
                  </span>
                </div>
              </form>
            </div>
            <!-- /.card-footer-->
          </div>
          <!--/.direct-chat -->
        </div>
        <!-- /.col -->

        <div class="col-md-3">
          <!-- DIRECT CHAT DANGER -->
          <div class="card card-danger direct-chat direct-chat-danger">
            <div class="card-header with-border">
              <h3 class="card-title">Direct Chat</h3>

              <div class="card-tools btn-group-xs float-right">
                <span data-toggle="tooltip" title="3 New Messages" class="badge bg-danger">3</span>
                <button type="button" class="btn btn-card-tool" data-widget="collapse">
                  <font-awesome-icon icon="futbol" />
                </button>
                <button
                  type="button"
                  class="btn btn-card-tool"
                  data-toggle="tooltip"
                  title="Contacts"
                  data-widget="chat-pane-toggle"
                >
                  <font-awesome-icon icon="forward" />
                </button>
                <button type="button" class="btn btn-card-tool" data-widget="remove">
                  <font-awesome-icon icon="times" />
                </button>
              </div>
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <!-- Conversations are loaded here -->
              <div class="direct-chat-messages">
                <!-- Message. Default to the left -->
                <div class="direct-chat-msg">
                  <div class="direct-chat-info clearfix">
                    <span class="direct-chat-name float-left">Alexander Pierce</span>
                    <span class="direct-chat-timestamp float-right">23 Jan 2:00 pm</span>
                  </div>
                  <!-- /.direct-chat-info -->
                  <img class="direct-chat-img" src="@/assets/img/user1-128x128.jpg" alt="Message User Image" />
                  <!-- /.direct-chat-img -->
                  <div class="direct-chat-text">Is this template really for free? That's unbelievable!</div>
                  <!-- /.direct-chat-text -->
                </div>
                <!-- /.direct-chat-msg -->

                <!-- Message to the right -->
                <div class="direct-chat-msg right">
                  <div class="direct-chat-info clearfix">
                    <span class="direct-chat-name float-right">Sarah Bullock</span>
                    <span class="direct-chat-timestamp float-left">23 Jan 2:05 pm</span>
                  </div>
                  <!-- /.direct-chat-info -->
                  <img class="direct-chat-img" src="@/assets/img/user1-128x128.jpg" alt="Message User Image" />
                  <!-- /.direct-chat-img -->
                  <div class="direct-chat-text">You better believe it!</div>
                  <!-- /.direct-chat-text -->
                </div>
                <!-- /.direct-chat-msg -->
              </div>
              <!--/.direct-chat-messages-->

              <!-- Contacts are loaded here -->
              <div class="direct-chat-contacts">
                <ul class="contacts-list">
                  <li>
                    <a href="#">
                      <img class="contacts-list-img" src="@/assets/img/user1-128x128.jpg" alt="User Image" />

                      <div class="contacts-list-info">
                        <span class="contacts-list-name">
                          Count Dracula
                          <small class="contacts-list-date float-right">2/28/2015</small>
                        </span>
                        <span class="contacts-list-msg">How have you been? I was...</span>
                      </div>
                      <!-- /.contacts-list-info -->
                    </a>
                  </li>
                  <!-- End Contact Item -->
                </ul>
                <!-- /.contatcts-list -->
              </div>
              <!-- /.direct-chat-pane -->
            </div>
            <!-- /.card-body -->
            <div class="card-footer">
              <form action="#" method="post">
                <div class="input-group">
                  <input type="text" name="message" placeholder="Type Message ..." class="form-control" />
                  <span class="input-group-append">
                    <button type="submit" class="btn btn-danger btn-flat">Send</button>
                  </span>
                </div>
              </form>
            </div>
            <!-- /.card-footer-->
          </div>
          <!--/.direct-chat -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

      <h2 class="page-header">Social Widgets</h2>

      <div class="row">
        <div class="col-md-4">
          <!-- Widget: user widget style 1 -->
          <div class="card card-widget widget-user-2">
            <!-- Add the bg color to the header using any of the bg-* classes -->
            <div class="widget-user-header bg-warning">
              <div class="widget-user-image">
                <img class="img-circle" src="@/assets/img/user7-128x128.jpg" alt="User Avatar" />
              </div>
              <!-- /.widget-user-image -->
              <h3 class="widget-user-username">Nadia Carmichael</h3>
              <h5 class="widget-user-desc">Lead Developer</h5>
            </div>
            <div class="card-footer no-padding">
              <ul class="nav nav-stacked">
                <li>
                  <a href="#">Projects <span class="float-right badge bg-blue">31</span></a>
                </li>
                <li>
                  <a href="#">Tasks <span class="float-right badge bg-info">5</span></a>
                </li>
                <li>
                  <a href="#">Completed Projects <span class="float-right badge bg-success">12</span></a>
                </li>
                <li>
                  <a href="#">Followers <span class="float-right badge bg-danger">842</span></a>
                </li>
              </ul>
            </div>
          </div>
          <!-- /.widget-user -->
        </div>
        <!-- /.col -->
        <div class="col-md-4">
          <!-- Widget: user widget style 1 -->
          <div class="card card-widget widget-user">
            <!-- Add the bg color to the header using any of the bg-* classes -->
            <div class="widget-user-header bg-info-active">
              <h3 class="widget-user-username">Alexander Pierce</h3>
              <h5 class="widget-user-desc">Founder &amp; CEO</h5>
            </div>
            <div class="widget-user-image">
              <img class="img-circle" src="@/assets/img/user1-128x128.jpg" alt="User Avatar" />
            </div>
            <div class="card-footer">
              <div class="row">
                <div class="col-sm-4 border-right">
                  <div class="description-block">
                    <h5 class="description-header">3,200</h5>
                    <span class="description-text">SALES</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-4 border-right">
                  <div class="description-block">
                    <h5 class="description-header">13,000</h5>
                    <span class="description-text">FOLLOWERS</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-4">
                  <div class="description-block">
                    <h5 class="description-header">35</h5>
                    <span class="description-text">PRODUCTS</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </div>
          </div>
          <!-- /.widget-user -->
        </div>
        <!-- /.col -->
        <div class="col-md-4">
          <!-- Widget: user widget style 1 -->
          <div class="card card-widget widget-user">
            <!-- Add the bg color to the header using any of the bg-* classes -->
            <div class="widget-user-header bg-black">
              <h3 class="widget-user-username">Elizabeth Pierce</h3>
              <h5 class="widget-user-desc">Web Designer</h5>
            </div>
            <div class="widget-user-image">
              <img class="img-circle" src="@/assets/img/user1-128x128.jpg" alt="User Avatar" />
            </div>
            <div class="card-footer">
              <div class="row">
                <div class="col-sm-4 border-right">
                  <div class="description-block">
                    <h5 class="description-header">3,200</h5>
                    <span class="description-text">SALES</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-4 border-right">
                  <div class="description-block">
                    <h5 class="description-header">13,000</h5>
                    <span class="description-text">FOLLOWERS</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
                <div class="col-sm-4">
                  <div class="description-block">
                    <h5 class="description-header">35</h5>
                    <span class="description-text">PRODUCTS</span>
                  </div>
                  <!-- /.description-block -->
                </div>
                <!-- /.col -->
              </div>
              <!-- /.row -->
            </div>
          </div>
          <!-- /.widget-user -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->

      <div class="row">
        <div class="col-md-6">
          <!-- card Comment -->
          <div class="card card-widget">
            <div class="card-header with-border">
              <div class="user-block">
                <img class="img-circle" src="@/assets/img/user1-128x128.jpg" alt="User Image" />
                <span class="username"><a href="#">Jonathan Burke Jr.</a></span>
                <span class="description">Shared publicly - 7:30 PM Today</span>
              </div>
              <!-- /.user-block -->
              <div class="card-tools btn-group-xs">
                <button type="button" class="btn btn-card-tool" data-toggle="tooltip" title="Mark as read">
                  <font-awesome-icon icon="trash-alt" />
                </button>
                <button type="button" class="btn btn-card-tool" data-widget="collapse">
                  <font-awesome-icon icon="trash-alt" />
                </button>
                <button type="button" class="btn btn-card-tool" data-widget="remove">
                  <font-awesome-icon icon="trash-alt" />
                </button>
              </div>
              <!-- /.card-tools btn-group-xs -->
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <!-- <img class="img-responsive pad" src="@/assets/img/photo2.png" alt="Photo"> -->

              <p>I took this photo this morning. What do you guys think?</p>
              <button type="button" class="btn btn-default btn-xs">
                <font-awesome-icon icon="share" />
                Share
              </button>
              <button type="button" class="btn btn-default btn-xs">
                <font-awesome-icon icon="thumbs-o-up" />
                Like
              </button>
              <span class="float-right text-muted">127 likes - 3 comments</span>
            </div>
            <!-- /.card-body -->
            <div class="card-footer card-comments">
              <div class="card-comment">
                <!-- User image -->
                <img class="img-circle img-sm" src="@/assets/img/user1-128x128.jpg" alt="User Image" />

                <div class="comment-text">
                  <span class="username">
                    Maria Gonzales
                    <span class="text-muted float-right">8:03 PM Today</span> </span
                  ><!-- /.username -->
                  It is a long established fact that a reader will be distracted by the readable content of a page when
                  looking at its layout.
                </div>
                <!-- /.comment-text -->
              </div>
              <!-- /.card-comment -->
              <div class="card-comment">
                <!-- User image -->
                <!-- <img class="img-circle img-sm" src="@/assets/img/user4-128x128.jpg" alt="User Image"> -->

                <div class="comment-text">
                  <span class="username">
                    Luna Stark
                    <span class="text-muted float-right">8:03 PM Today</span> </span
                  ><!-- /.username -->
                  It is a long established fact that a reader will be distracted by the readable content of a page when
                  looking at its layout.
                </div>
                <!-- /.comment-text -->
              </div>
              <!-- /.card-comment -->
            </div>
            <!-- /.card-footer -->
            <div class="card-footer">
              <form action="#" method="post">
                <!-- <img class="img-responsive img-circle img-sm" src="@/assets/img/user4-128x128.jpg" alt="Alt Text"> -->
                <!-- .img-push is used to add margin to elements next to floating images -->
                <div class="img-push">
                  <input type="text" class="form-control input-sm" placeholder="Press enter to post comment" />
                </div>
              </form>
            </div>
            <!-- /.card-footer -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
        <div class="col-md-6">
          <!-- card Comment -->
          <div class="card card-widget">
            <div class="card-header with-border">
              <div class="user-block">
                <img class="img-circle" src="@/assets/img/user1-128x128.jpg" alt="User Image" />
                <span class="username"><a href="#">Jonathan Burke Jr.</a></span>
                <span class="description">Shared publicly - 7:30 PM Today</span>
              </div>
              <!-- /.user-block -->
              <div class="card-tools btn-group-xs">
                <button type="button" class="btn btn-card-tool" data-toggle="tooltip" title="Mark as read">
                  <font-awesome-icon icon="circle-o" />
                </button>
                <button type="button" class="btn btn-card-tool" data-widget="collapse">
                  <font-awesome-icon icon="minus" />
                </button>
                <button type="button" class="btn btn-card-tool" data-widget="remove">
                  <font-awesome-icon icon="times" />
                </button>
              </div>
              <!-- /.card-tools btn-group-xs -->
            </div>
            <!-- /.card-header -->
            <div class="card-body">
              <!-- post text -->
              <p>
                Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the
                blind texts. Separated they live in Bookmarksgrove right at
              </p>

              <p>
                the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and
                supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of
                sentences fly into your mouth.
              </p>

              <!-- Attachment -->
              <div class="attachment-block clearfix">
                <!-- <img class="attachment-img" src="@/assets/img/photo1.png" alt="Attachment Image"> -->

                <div class="attachment-pushed">
                  <h4 class="attachment-heading"><a href="http://www.lipsum.com/">Lorem ipsum text generator</a></h4>

                  <div class="attachment-text">
                    Description about the attachment can be placed here. Lorem Ipsum is simply dummy text of the
                    printing and typesetting industry... <a href="#">more</a>
                  </div>
                  <!-- /.attachment-text -->
                </div>
                <!-- /.attachment-pushed -->
              </div>
              <!-- /.attachment-block -->

              <!-- Social sharing buttons -->
              <button type="button" class="btn btn-default btn-xs">
                <font-awesome-icon icon="share" />
                Share
              </button>
              <button type="button" class="btn btn-default btn-xs">
                <font-awesome-icon icon="thumbs-o-up" />
                Like
              </button>
              <span class="float-right text-muted">45 likes - 2 comments</span>
            </div>
            <!-- /.card-body -->
            <div class="card-footer card-comments">
              <div class="card-comment">
                <!-- User image -->
                <img class="img-circle img-sm" src="@/assets/img/user1-128x128.jpg" alt="User Image" />

                <div class="comment-text">
                  <span class="username">
                    Maria Gonzales
                    <span class="text-muted float-right">8:03 PM Today</span> </span
                  ><!-- /.username -->
                  It is a long established fact that a reader will be distracted by the readable content of a page when
                  looking at its layout.
                </div>
                <!-- /.comment-text -->
              </div>
              <!-- /.card-comment -->
              <div class="card-comment">
                <!-- User image -->
                <img class="img-circle img-sm" src="@/assets/img/user5-128x128.jpg" alt="User Image" />

                <div class="comment-text">
                  <span class="username">
                    Nora Havisham
                    <span class="text-muted float-right">8:03 PM Today</span> </span
                  ><!-- /.username -->
                  The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as
                  opposed to using 'Content here, content here', making it look like readable English.
                </div>
                <!-- /.comment-text -->
              </div>
              <!-- /.card-comment -->
            </div>
            <!-- /.card-footer -->
            <div class="card-footer">
              <form action="#" method="post">
                <!-- <img class="img-responsive img-circle img-sm" src="@/assets/img/user4-128x128.jpg" alt="Alt Text"> -->
                <!-- .img-push is used to add margin to elements next to floating images -->
                <div class="img-push">
                  <input type="text" class="form-control input-sm" placeholder="Press enter to post comment" />
                </div>
              </form>
            </div>
            <!-- /.card-footer -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </section>
    <!-- /.content -->
    <section class="content">
      <div class="row">
        <div class="col-md-12">
          <div class="card card-primary">
            <div class="card-header">
              <font-awesome-icon icon="edit" />

              <h3 class="card-title">Buttons</h3>
            </div>
            <div class="card-body pad table-responsive">
              <p>Various types of buttons. Using the base class <code>.btn</code></p>
              <table class="table table-bordered text-center table-sm">
                <tr>
                  <th>Normal</th>
                  <th>Large <code>.btn-lg</code></th>
                  <th>Small <code>.btn-sm</code></th>
                  <th>X-Small <code>.btn-xs</code></th>
                  <th>Flat <code>.e-flat</code></th>
                  <th>Disabled <code>.disabled</code></th>
                </tr>
                <tr>
                  <td>
                    <button type="button" class="btn btn-block">btn</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-lg">btn</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-sm">btn</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-xs">btn</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block e-flat">btn</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block disabled">btn</button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <button type="button" class="btn btn-block btn-default">Default</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-default btn-lg">Default</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-default btn-sm">Default</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-default btn-xs">Default</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-default e-flat">Default</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-default disabled">Default</button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <button type="button" class="btn btn-block btn-primary">Primary</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-primary btn-lg">Primary</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-primary btn-sm">Primary</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-primary btn-xs">Primary</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-primary e-flat">Primary</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-primary disabled">Primary</button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <button type="button" class="btn btn-block btn-success">Success</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-success btn-lg">Success</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-success btn-sm">Success</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-success btn-xs">Success</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-success e-flat">Success</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-success disabled">Success</button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <button type="button" class="btn btn-block btn-info">Info</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-info btn-lg">Info</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-info btn-sm">Info</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-info btn-xs">Info</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-info e-flat">Info</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-info disabled">Info</button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <button type="button" class="btn btn-block btn-danger">Danger</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-danger btn-lg">Danger</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-danger btn-sm">Danger</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-danger btn-xs">Danger</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-danger e-flat">Danger</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-danger disabled">Danger</button>
                  </td>
                </tr>
                <tr>
                  <td>
                    <button type="button" class="btn btn-block btn-warning">Warning</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-warning btn-lg">Warning</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-warning btn-sm">Warning</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-warning btn-xs">Warning</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-warning e-flat">Warning</button>
                  </td>
                  <td>
                    <button type="button" class="btn btn-block btn-warning disabled">Warning</button>
                  </td>
                </tr>
              </table>

              <div class="btn-border">
                <div class="btn-group">
                  <button type="button" class="btn btn-sm" data-event-type="add">
                    <font-awesome-icon icon="plus" />
                    新增
                  </button>
                  <button type="button" class="btn btn-sm" data-event-type="edit">
                    <font-awesome-icon icon="edit" />
                    编辑
                  </button>
                  <button type="button" class="btn btn-sm" data-event-type="copy">
                    <font-awesome-icon icon="copy" />
                    复制
                  </button>
                  <button type="button" class="btn btn-sm" data-event-type="delete">
                    <font-awesome-icon icon="trash-alt" />
                    删除
                  </button>
                  <button type="button" class="btn btn-sm" data-event-type="audit">
                    <font-awesome-icon icon="check-square-o" />
                    审核
                  </button>
                  <button type="button" class="btn btn-sm" data-event-type="unaudit">
                    <font-awesome-icon icon="square-o" />
                    反审核
                  </button>
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm dropdown" data-toggle="dropdown">
                      导出
                      <font-awesome-icon icon="caret-down" />
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                      <li><a class="" data-event-type="exportCurrent">导出当前页</a></li>
                      <li><a data-event-type="exportAll">导出所有页</a></li>
                      <li><a data-event-type="exportSetting">导出设置</a></li>
                    </ul>
                  </div>
                  <div class="btn-group">
                    <button
                      type="button"
                      class="btn btn-sm dropdown"
                      data-event-type="print"
                      data-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i class="el-icon-printer" /> 打印 <i class="el-icon-caret-bottom" />
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                      <li><a class="" data-event-type="printCurrent">打印当前页</a></li>
                      <li><a data-event-type="printAll">打印所有页</a></li>
                      <li><a data-event-type="printSetting">打印设置</a></li>
                    </ul>
                  </div>
                  <button type="button" class="btn btn-sm" data-event-type="import">
                    <font-awesome-icon icon="cloud-upload" />
                    导入
                  </button>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-default" data-event-type="add">
                    <font-awesome-icon icon="plus" />
                    新增
                  </button>
                  <button type="button" class="btn btn-sm btn-default" data-event-type="edit">
                    <font-awesome-icon icon="edit" />
                    编辑
                  </button>
                  <button type="button" class="btn btn-sm btn-default" data-event-type="copy">
                    <font-awesome-icon icon="copy" />
                    复制
                  </button>
                  <button type="button" class="btn btn-sm btn-default" data-event-type="delete">
                    <font-awesome-icon icon="trash-alt" /> 删除
                  </button>
                  <button type="button" class="btn btn-sm btn-default" data-event-type="audit">
                    <i class="fas fa-check-square-o" /> 审核
                  </button>
                  <button type="button" class="btn btn-sm btn-default" data-event-type="unaudit">
                    <i class="fas fa-square-o" /> 反审核
                  </button>
                  <button type="button" class="btn btn-sm btn-default" data-event-type="import">
                    <font-awesome-icon icon="cloud-upload" />
                    导入
                  </button>
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-default dropdown" data-toggle="dropdown">
                      导出 <i class="el-icon-caret-bottom" />
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                      <li><a class="" data-event-type="exportCurrent">导出当前页</a></li>
                      <li><a data-event-type="exportAll">导出所有页</a></li>
                      <li><a data-event-type="exportSetting">导出设置</a></li>
                    </ul>
                  </div>
                  <div class="btn-group">
                    <button
                      type="button"
                      class="btn btn-sm btn-default dropdown-toggle"
                      data-event-type="print"
                      data-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i class="el-icon-printer" /> 打印 <i class="el-icon-caret-bottom" />
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                      <li><a class="" data-event-type="printCurrent">打印当前页</a></li>
                      <li><a data-event-type="printAll">打印所有页</a></li>
                      <li><a data-event-type="printSetting">打印设置</a></li>
                    </ul>
                  </div>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-primary" @click="handleCreate">
                    <font-awesome-icon icon="plus" />
                    {{ $t('button.add') }}
                  </button>
                  <button type="button" class="btn btn-sm btn-primary" data-event-type="edit">
                    <font-awesome-icon :icon="['fas', 'edit']" />
                    {{ $t('button.edit') }}
                  </button>
                  <button type="button" class="btn btn-sm btn-primary" data-event-type="copy">
                    <font-awesome-icon :icon="['fas', 'copy']" />
                    {{ $t('button.copy') }}
                  </button>
                  <button type="button" class="btn btn-sm btn-primary" data-event-type="delete">
                    <font-awesome-icon icon="trash-alt" />
                    {{ $t('button.delete') }}
                  </button>
                  <button type="button" class="btn btn-sm btn-primary" data-event-type="audit">
                    <font-awesome-icon icon="stamp" />
                    {{ $t('button.audit') }}
                  </button>
                  <button type="button" class="btn btn-sm btn-primary" data-event-type="unaudit">
                    <font-awesome-icon icon="eraser" />
                    {{ $t('button.unaudit') }}
                  </button>
                  <button
                    v-waves
                    type="button"
                    :loading="downloadLoading"
                    class="btn btn-sm btn-primary"
                    @click="handleDownload"
                  >
                    <font-awesome-icon icon="file-upload" />
                    {{ $t('button.upload') }}
                  </button>
                  <button
                    v-waves
                    type="button"
                    :loading="downloadLoading"
                    class="btn btn-sm btn-primary"
                    @click="handleDownload"
                  >
                    <font-awesome-icon icon="file-download" />
                    {{ $t('button.download') }}
                  </button>
                  <button
                    v-waves
                    type="button"
                    :loading="downloadLoading"
                    class="btn btn-sm btn-primary"
                    @click="handleDownload"
                  >
                    <font-awesome-icon icon="file-import" />
                    {{ $t('button.import') }}
                  </button>
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-primary" data-toggle="dropdown">
                      <font-awesome-icon icon="file-export" />
                      {{ $t('button.export') }}
                      <font-awesome-icon icon="caret-down" />
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                      <li><a class="" data-event-type="exportCurrent">导出当前页</a></li>
                      <li><a data-event-type="exportAll">导出所有页</a></li>
                      <li><a data-event-type="exportSetting">导出设置</a></li>
                    </ul>
                  </div>
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-primary" data-toggle="dropdown">
                      <font-awesome-icon icon="cloud-download-alt" />
                      {{ $t('button.export') }}
                      <font-awesome-icon icon="caret-down" />
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                      <li><a class="" data-event-type="exportCurrent">导出当前页</a></li>
                      <li><a data-event-type="exportAll">导出所有页</a></li>
                      <li><a data-event-type="exportSetting">导出设置</a></li>
                    </ul>
                  </div>
                  <div class="btn-group">
                    <button
                      type="button"
                      class="btn btn-sm btn-primary dropdown right-radius"
                      data-event-type="print"
                      data-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <font-awesome-icon icon="print" />
                      {{ $t('button.print') }}
                      <font-awesome-icon icon="caret-down" />
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                      <li><a class="" data-event-type="printCurrent">打印当前页</a></li>
                      <li><a data-event-type="printAll">打印所有页</a></li>
                      <li><a data-event-type="printSetting">打印设置</a></li>
                    </ul>
                  </div>
                </div>
                <div class="btn-group">
                  <div class="btn-group">
                    <button
                      type="button"
                      class="btn btn-sm btn-success dropdown-toggle"
                      data-event-type="print"
                      data-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i class="el-icon-printer" /> 打印 <i class="el-icon-caret-bottom" />
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                      <li><a class="" data-event-type="printCurrent">打印当前页</a></li>
                      <li><a data-event-type="printAll">打印所有页</a></li>
                      <li><a data-event-type="printSetting">打印设置</a></li>
                    </ul>
                  </div>
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-success" data-event-type="add">
                      <font-awesome-icon icon="plus" />
                      新增
                    </button>
                    <button type="button" class="btn btn-sm btn-success" data-event-type="edit">
                      <font-awesome-icon icon="edit" />
                      编辑
                    </button>
                    <button type="button" class="btn btn-sm btn-success" data-event-type="copy">
                      <font-awesome-icon icon="copy" />
                      复制
                    </button>
                  </div>
                  <button type="button" class="btn btn-sm btn-success" data-event-type="delete">
                    <font-awesome-icon icon="trash-alt" /> 删除
                  </button>
                  <button type="button" class="btn btn-sm btn-success" data-event-type="audit">
                    <i class="fas fa-check-square-o" /> 审核
                  </button>
                  <button type="button" class="btn btn-sm btn-success" data-event-type="unaudit">
                    <i class="fas fa-square-o" /> 反审核
                  </button>
                  <button type="button" class="btn btn-sm btn-success" data-event-type="import">
                    <font-awesome-icon icon="cloud-upload" />
                    导入
                  </button>
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-success right-radius dropdown" data-toggle="dropdown">
                      导出
                      <font-awesome-icon icon="caret-down" />
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                      <li><a class="" data-event-type="exportCurrent">导出当前页</a></li>
                      <li><a data-event-type="exportAll">导出所有页</a></li>
                      <li><a data-event-type="exportSetting">导出设置</a></li>
                    </ul>
                  </div>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-danger" data-event-type="add">
                    <font-awesome-icon icon="plus" />
                    新增
                  </button>
                  <button type="button" class="btn btn-sm btn-danger" data-event-type="edit">
                    <font-awesome-icon icon="edit" />
                    编辑
                  </button>
                  <button type="button" class="btn btn-sm btn-danger" data-event-type="copy">
                    <font-awesome-icon icon="copy" />
                    复制
                  </button>
                  <button type="button" class="btn btn-sm btn-danger" data-event-type="delete">
                    <font-awesome-icon icon="trash-alt" /> 删除
                  </button>
                  <button type="button" class="btn btn-sm btn-danger" data-event-type="audit">
                    <i class="fas fa-check-square-o" /> 审核
                  </button>
                  <button type="button" class="btn btn-sm btn-danger" data-event-type="unaudit">
                    <i class="fas fa-square-o" /> 反审核
                  </button>
                  <button type="button" class="btn btn-sm btn-danger" data-event-type="import">
                    <font-awesome-icon icon="cloud-upload" />
                    导入
                  </button>
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-danger dropdown" data-toggle="dropdown">
                      导出 <i class="el-icon-caret-bottom" />
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                      <li><a class="" data-event-type="exportCurrent">导出当前页</a></li>
                      <li><a data-event-type="exportAll">导出所有页</a></li>
                      <li><a data-event-type="exportSetting">导出设置</a></li>
                    </ul>
                  </div>
                  <div class="btn-group">
                    <button
                      type="button"
                      class="btn btn-sm btn-danger dropdown-toggle"
                      data-event-type="print"
                      data-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i class="el-icon-printer" /> 打印 <i class="el-icon-caret-bottom" />
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                      <li><a class="" data-event-type="printCurrent">打印当前页</a></li>
                      <li><a data-event-type="printAll">打印所有页</a></li>
                      <li><a data-event-type="printSetting">打印设置</a></li>
                    </ul>
                  </div>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-info" data-event-type="add">
                    <font-awesome-icon icon="plus" />
                    新增
                  </button>
                  <button type="button" class="btn btn-sm btn-info" data-event-type="edit">
                    <font-awesome-icon icon="edit" />
                    编辑
                  </button>
                  <button type="button" class="btn btn-sm btn-info" data-event-type="copy">
                    <font-awesome-icon icon="copy" />
                    复制
                  </button>
                  <button type="button" class="btn btn-sm btn-info" data-event-type="delete">
                    <font-awesome-icon icon="trash-alt" /> 删除
                  </button>
                  <button type="button" class="btn btn-sm btn-info" data-event-type="audit">
                    <i class="fas fa-check-square-o" /> 审核
                  </button>
                  <button type="button" class="btn btn-sm btn-info" data-event-type="unaudit">
                    <font-awesome-icon icon="square-o" /> 反审核
                  </button>
                  <button type="button" class="btn btn-sm btn-info" data-event-type="import">
                    <font-awesome-icon icon="cloud-upload" />
                    导入
                  </button>
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-info dropdown" data-toggle="dropdown">
                      导出 <i class="fas fa-caret-down" />
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                      <li><a class="" data-event-type="exportCurrent">导出当前页</a></li>
                      <li><a data-event-type="exportAll">导出所有页</a></li>
                      <li><a data-event-type="exportSetting">导出设置</a></li>
                    </ul>
                  </div>
                  <div class="btn-group">
                    <button
                      type="button"
                      class="btn btn-sm btn-info dropdown right-radius"
                      data-event-type="print"
                      data-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i class="el-icon-printer" /> 打印 <i class="el-icon-caret-bottom" />
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                      <li><a class="" data-event-type="printCurrent">打印当前页</a></li>
                      <li><a data-event-type="printAll">打印所有页</a></li>
                      <li><a data-event-type="printSetting">打印设置</a></li>
                    </ul>
                  </div>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-sm btn-warning" data-event-type="add">
                    <font-awesome-icon icon="plus" />
                    新增
                  </button>
                  <button type="button" class="btn btn-sm btn-warning" data-event-type="edit">
                    <font-awesome-icon icon="edit" />
                    编辑
                  </button>
                  <button type="button" class="btn btn-sm btn-warning" data-event-type="copy">
                    <font-awesome-icon icon="copy" />
                    复制
                  </button>
                  <button type="button" class="btn btn-sm btn-warning" data-event-type="delete">
                    <font-awesome-icon icon="trash-alt" /> 删除
                  </button>
                  <button type="button" class="btn btn-sm btn-warning" data-event-type="audit">
                    <i class="fas fa-check-square-o" /> 审核
                  </button>
                  <button type="button" class="btn btn-sm btn-warning" data-event-type="unaudit">
                    <i class="fas fa-square-o" /> 反审核
                  </button>
                  <button type="button" class="btn btn-sm btn-warning" data-event-type="import">
                    <font-awesome-icon icon="cloud-upload" />
                    导入
                  </button>
                  <div class="btn-group">
                    <button type="button" class="btn btn-sm btn-warning dropdown" data-toggle="dropdown">
                      导出 <i class="fas fa-caret-down" />
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                      <li><a class="" data-event-type="exportCurrent">导出当前页</a></li>
                      <li><a data-event-type="exportAll">导出所有页</a></li>
                      <li><a data-event-type="exportSetting">导出设置</a></li>
                    </ul>
                  </div>
                  <div class="btn-group">
                    <button
                      type="button"
                      class="btn btn-sm btn-warning dropdown-toggle"
                      data-event-type="print"
                      data-toggle="dropdown"
                      aria-expanded="false"
                    >
                      <i class="el-icon-printer" /> 打印
                    </button>
                    <ul role="menu" class="dropdown-menu dropdown-menu-right">
                      <li><a class="" data-event-type="printCurrent">打印当前页</a></li>
                      <li><a data-event-type="printAll">打印所有页</a></li>
                      <li><a data-event-type="printSetting">打印设置</a></li>
                    </ul>
                  </div>
                  <button type="button" class="btn btn-sm btn-warning" data-event-type="audit">
                    <i class="fas fa-check-square-o" /> 审核
                  </button>
                </div>
                <div class="btn-toolbar" role="toolbar">
                  <div class="btn-group">
                    <button type="button" class="btn btn-default">按钮 1</button>
                    <button type="button" class="btn btn-default">按钮 2</button>
                    <button type="button" class="btn btn-default">按钮 3</button>
                  </div>
                  <div class="btn-group">
                    <button type="button" class="btn btn-default">按钮 4</button>
                    <button type="button" class="btn btn-default">按钮 5</button>
                    <button type="button" class="btn btn-default">按钮 6</button>
                  </div>
                  <div class="btn-group">
                    <button type="button" class="btn btn-default">按钮 7</button>
                    <button type="button" class="btn btn-default">按钮 8</button>
                    <button type="button" class="btn btn-default">按钮 9</button>
                  </div>
                </div>
              </div>
            </div>
            <!-- /.card -->
          </div>
        </div>
        <!-- /.col -->
      </div>
      <!-- ./row -->
      <div class="row">
        <div class="col-md-6">
          <!-- Block buttons -->
          <div class="card card-primary">
            <div class="card-header">
              <h3 class="card-title">Block Buttons</h3>
            </div>
            <div class="card-body">
              <button type="button" class="btn btn-default btn-block">.btn-block</button>
              <button type="button" class="btn btn-default btn-block e-flat">.btn-block .e-flat</button>
              <button type="button" class="btn btn-default btn-block btn-sm">.btn-block .btn-sm</button>
            </div>
          </div>
          <!-- /.card -->

          <div class="card card-danger">
            <div class="card-header">
              <h3 class="card-title">background-color</h3>
            </div>
            <div class="card-body table-responsive pad">
              <table class="table table-bordered table-sm">
                <tr>
                  <th>background-color</th>
                </tr>
                <!-- Default -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn bg-default-lighter">default-lighter</button>
                      <button type="button" class="btn bg-default-light">default-light</button>
                      <button type="button" class="btn bg-default">default</button>
                      <button type="button" class="btn bg-default-dark">default-dark</button>
                      <button type="button" class="btn bg-default-darker">default-darker</button>
                    </div>
                  </td>
                </tr>
                <!-- ./default -->
                <!-- primary -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn bg-primary-lighter">primary-lighter</button>
                      <button type="button" class="btn bg-primary-light">primary-light</button>
                      <button type="button" class="btn bg-primary">primary</button>
                      <button type="button" class="btn bg-primary-dark">primary-dark</button>
                      <button type="button" class="btn bg-primary-darker">primary-darker</button>
                    </div>
                  </td>
                </tr>
                <!-- ./primary -->
                <!-- success -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn bg-success-lighter">success-lighter</button>
                      <button type="button" class="btn bg-success-light">success-light</button>
                      <button type="button" class="btn bg-success">success</button>
                      <button type="button" class="btn bg-success-dark">success-dark</button>
                      <button type="button" class="btn bg-success-darker">success-darker</button>
                    </div>
                  </td>
                </tr>
                <!-- ./success -->
                <!-- info -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn bg-info-lighter">info-lighter</button>
                      <button type="button" class="btn bg-info-light">info-light</button>
                      <button type="button" class="btn bg-info">info</button>
                      <button type="button" class="btn bg-info-dark">info-dark</button>
                      <button type="button" class="btn bg-info-darker">info-darker</button>
                    </div>
                  </td>
                </tr>
                <!-- ./info -->
                <!-- danger -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn bg-danger-lighter">danger-lighter</button>
                      <button type="button" class="btn bg-danger-light">danger-light</button>
                      <button type="button" class="btn bg-danger">danger</button>
                      <button type="button" class="btn bg-danger-dark">danger-dark</button>
                      <button type="button" class="btn bg-danger-darker">danger-darker</button>
                    </div>
                  </td>
                </tr>
                <!-- ./danger -->
                <!-- warning -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn bg-warning-lighter">warning-lighter</button>
                      <button type="button" class="btn bg-warning-light">warning-light</button>
                      <button type="button" class="btn bg-warning">warning</button>
                      <button type="button" class="btn bg-warning-dark">warning-dark</button>
                      <button type="button" class="btn bg-warning-darker">warning-darker</button>
                    </div>
                  </td>
                </tr>
                <!-- /.warning -->
              </table>
            </div>
          </div>

          <div class="card card-danger">
            <div class="card-header">
              <h3 class="card-title">background-color</h3>
            </div>
            <div class="card-body table-responsive pad">
              <table class="table table-bordered table-sm">
                <tr>
                  <th>background-color</th>
                </tr>
                <!-- Default -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn bg-default-extra-light">default-extra-light</button>
                      <button type="button" class="btn bg-default-lighter">default-lighter</button>
                      <button type="button" class="btn bg-default-light">default-light</button>
                      <button type="button" class="btn bg-default">default</button>
                      <button type="button" class="btn bg-default-dark">default-dark</button>
                      <button type="button" class="btn bg-default-darker">default-darker</button>
                      <button type="button" class="btn bg-default-extra-dark">default-extra-dark</button>
                    </div>
                  </td>
                </tr>
                <!-- ./default -->
                <!-- primary -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn bg-primary-extra-light">primary-extra-light</button>
                      <button type="button" class="btn bg-primary-lighter">primary-lighter</button>
                      <button type="button" class="btn bg-primary-light">primary-light</button>
                      <button type="button" class="btn bg-primary">primary</button>
                      <button type="button" class="btn bg-primary-dark">primary-dark</button>
                      <button type="button" class="btn bg-primary-darker">primary-darker</button>
                      <button type="button" class="btn bg-primary-extra-dark">primary-extra-dark</button>
                    </div>
                  </td>
                </tr>
                <!-- ./primary -->
                <!-- success -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn bg-success-extra-light">success-extra-light</button>
                      <button type="button" class="btn bg-success-lighter">success-lighter</button>
                      <button type="button" class="btn bg-success-light">success-light</button>
                      <button type="button" class="btn bg-success">success</button>
                      <button type="button" class="btn bg-success-dark">success-dark</button>
                      <button type="button" class="btn bg-success-darker">success-darker</button>
                      <button type="button" class="btn bg-success-extra-dark">success-extra-dark</button>
                    </div>
                  </td>
                </tr>
                <!-- ./success -->
                <!-- info -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn bg-info-extra-light">info-extra-light</button>
                      <button type="button" class="btn bg-info-lighter">info-lighter</button>
                      <button type="button" class="btn bg-info-light">info-light</button>
                      <button type="button" class="btn bg-info">info</button>
                      <button type="button" class="btn bg-info-dark">info-dark</button>
                      <button type="button" class="btn bg-info-darker">info-darker</button>
                      <button type="button" class="btn bg-info-extra-dark">info-extra-dark</button>
                    </div>
                  </td>
                </tr>
                <!-- ./info -->
                <!-- danger -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn bg-danger-extra-light">danger-extra-light</button>
                      <button type="button" class="btn bg-danger-lighter">danger-lighter</button>
                      <button type="button" class="btn bg-danger-light">danger-light</button>
                      <button type="button" class="btn bg-danger">danger</button>
                      <button type="button" class="btn bg-danger-dark">danger-dark</button>
                      <button type="button" class="btn bg-danger-darker">danger-darker</button>
                      <button type="button" class="btn bg-danger-extra-dark">danger-extra-dark</button>
                    </div>
                  </td>
                </tr>
                <!-- ./danger -->
                <!-- warning -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn bg-warning-extra-light">warning-extra-light</button>
                      <button type="button" class="btn bg-warning-lighter">warning-lighter</button>
                      <button type="button" class="btn bg-warning-light">warning-light</button>
                      <button type="button" class="btn bg-warning">warning</button>
                      <button type="button" class="btn bg-warning-dark">warning-dark</button>
                      <button type="button" class="btn bg-warning-darker">warning-darker</button>
                      <button type="button" class="btn bg-warning-extra-dark">warning-extra-dark</button>
                    </div>
                  </td>
                </tr>
                <!-- /.warning -->
              </table>
            </div>
          </div>

          <!-- Horizontal grouping -->
          <div class="card card-danger">
            <div class="card-header">
              <h3 class="card-title">Horizontal Button Group</h3>
            </div>
            <div class="card-body table-responsive pad">
              <p>
                Horizontal button groups are easy to create with bootstrap. Just add your buttons inside
                <code>&lt;div class="btn-group"&gt;&lt;/div&gt;</code>
              </p>

              <table class="table table-bordered table-sm">
                <tr>
                  <th>Button</th>
                  <th>Icons</th>
                  <th>Flat</th>
                  <th>Dropdown</th>
                </tr>
                <!-- Default -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-default">Left</button>
                      <button type="button" class="btn btn-default">Middle</button>
                      <button type="button" class="btn btn-default">Right</button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-default">
                        <font-awesome-icon icon="align-left" />
                      </button>
                      <button type="button" class="btn btn-default">
                        <font-awesome-icon icon="align-center" />
                      </button>
                      <button type="button" class="btn btn-default">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-default e-flat">
                        <font-awesome-icon icon="align-left" />
                      </button>
                      <button type="button" class="btn btn-default e-flat">
                        <font-awesome-icon icon="align-center" />
                      </button>
                      <button type="button" class="btn btn-default e-flat">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-default">1</button>
                      <button type="button" class="btn btn-default">2</button>

                      <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                          <span class="caret" />
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown link</a></li>
                          <li><a href="#">Dropdown link</a></li>
                        </ul>
                      </div>
                    </div>
                  </td>
                </tr>
                <!-- ./default -->
                <!-- Info -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-info">Left</button>
                      <button type="button" class="btn btn-info">Middle</button>
                      <button type="button" class="btn btn-info">Right</button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-info">
                        <font-awesome-icon icon="align-left" />
                      </button>
                      <button type="button" class="btn btn-info">
                        <font-awesome-icon icon="align-center" />
                      </button>
                      <button type="button" class="btn btn-info">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-info e-flat">
                        <font-awesome-icon icon="align-left" />
                      </button>
                      <button type="button" class="btn btn-info e-flat">
                        <font-awesome-icon icon="align-center" />
                      </button>
                      <button type="button" class="btn btn-info e-flat">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-info">1</button>
                      <button type="button" class="btn btn-info">2</button>

                      <div class="btn-group">
                        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                          <span class="caret" />
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown link</a></li>
                          <li><a href="#">Dropdown link</a></li>
                        </ul>
                      </div>
                    </div>
                  </td>
                </tr>
                <!-- /. info -->
                <!-- /.danger -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-danger">Left</button>
                      <button type="button" class="btn btn-danger">Middle</button>
                      <button type="button" class="btn btn-danger">Right</button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-danger">
                        <font-awesome-icon icon="align-left" />
                      </button>
                      <button type="button" class="btn btn-danger">
                        <font-awesome-icon icon="align-center" />
                      </button>
                      <button type="button" class="btn btn-danger">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-danger e-flat">
                        <font-awesome-icon icon="align-left" />
                      </button>
                      <button type="button" class="btn btn-danger e-flat">
                        <font-awesome-icon icon="align-center" />
                      </button>
                      <button type="button" class="btn btn-danger e-flat">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-danger">1</button>
                      <button type="button" class="btn btn-danger">2</button>

                      <div class="btn-group">
                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                          <span class="caret" />
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown link</a></li>
                          <li><a href="#">Dropdown link</a></li>
                        </ul>
                      </div>
                    </div>
                  </td>
                </tr>
                <!-- /.danger -->
                <!-- warning -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-warning">Left</button>
                      <button type="button" class="btn btn-warning">Middle</button>
                      <button type="button" class="btn btn-warning">Right</button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-warning">
                        <font-awesome-icon icon="align-left" />
                      </button>
                      <button type="button" class="btn btn-warning">
                        <font-awesome-icon icon="align-center" />
                      </button>
                      <button type="button" class="btn btn-warning">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-warning e-flat">
                        <font-awesome-icon icon="align-left" />
                      </button>
                      <button type="button" class="btn btn-warning e-flat">
                        <font-awesome-icon icon="align-center" />
                      </button>
                      <button type="button" class="btn btn-warning e-flat">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-warning">1</button>
                      <button type="button" class="btn btn-warning">2</button>

                      <div class="btn-group">
                        <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                          <span class="caret" />
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown link</a></li>
                          <li><a href="#">Dropdown link</a></li>
                        </ul>
                      </div>
                    </div>
                  </td>
                </tr>
                <!-- /.warning -->
                <!-- success -->
                <tr>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-success">Left</button>
                      <button type="button" class="btn btn-success">Middle</button>
                      <button type="button" class="btn btn-success">Right</button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-success">
                        <font-awesome-icon icon="align-left" />
                      </button>
                      <button type="button" class="btn btn-success">
                        <font-awesome-icon icon="align-center" />
                      </button>
                      <button type="button" class="btn btn-success">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-success e-flat">
                        <font-awesome-icon icon="align-left" />
                      </button>
                      <button type="button" class="btn btn-success e-flat">
                        <font-awesome-icon icon="align-center" />
                      </button>
                      <button type="button" class="btn btn-success e-flat">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group">
                      <button type="button" class="btn btn-success">1</button>
                      <button type="button" class="btn btn-success">2</button>

                      <div class="btn-group">
                        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                          <span class="caret" />
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown link</a></li>
                          <li><a href="#">Dropdown link</a></li>
                        </ul>
                      </div>
                    </div>
                  </td>
                </tr>
                <!-- /.success -->
              </table>
            </div>
          </div>
          <!-- /.card -->

          <div class="card card-success">
            <div class="card-header">
              <h3 class="card-title">Button Addon</h3>
            </div>
            <div class="card-body">
              <p>With dropdown</p>

              <div class="input-group margin">
                <div class="input-group-btn">
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    Action <span class="fas fa-caret-down" />
                  </button>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" />
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
                <!-- /btn-group -->
                <input type="text" class="form-control" />
              </div>
              <!-- /input-group -->
              <p>Normal</p>

              <div class="input-group margin">
                <div class="input-group-btn">
                  <button type="button" class="btn btn-danger">Action</button>
                </div>
                <!-- /btn-group -->
                <input type="text" class="form-control" />
              </div>
              <!-- /input-group -->
              <p>Flat</p>

              <div class="input-group margin">
                <input type="text" class="form-control" />
                <span class="input-group-append">
                  <button type="button" class="btn btn-info e-flat">Go!</button>
                </span>
              </div>
              <!-- /input-group -->
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
          <!-- split buttons card -->
          <div class="card card-info">
            <div class="card-header">
              <h3 class="card-title">Split buttons</h3>
            </div>
            <div class="card-body">
              <!-- Split button -->
              <p>Normal split buttons:</p>

              <div class="margin">
                <div class="btn-group">
                  <button type="button" class="btn btn-default">Action</button>
                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <span class="caret" />
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" />
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-info">Action</button>
                  <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                    <span class="caret" />
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" />
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-danger">Action</button>
                  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                    <span class="caret" />
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" />
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-success">Action</button>
                  <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                    <span class="caret" />
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" />
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-warning">Action</button>
                  <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                    <span class="caret" />
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" />
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
              </div>
              <!-- flat split buttons -->
              <p>Flat split buttons:</p>

              <div class="margin">
                <div class="btn-group">
                  <button type="button" class="btn btn-default e-flat">Action</button>
                  <button type="button" class="btn btn-default e-flat dropdown-toggle" data-toggle="dropdown">
                    <span class="caret" />
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" />
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-info e-flat">Action</button>
                  <button type="button" class="btn btn-info e-flat dropdown-toggle" data-toggle="dropdown">
                    <span class="caret" />
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" />
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-danger e-flat">Action</button>
                  <button type="button" class="btn btn-danger e-flat dropdown-toggle" data-toggle="dropdown">
                    <span class="caret" />
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" />
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-success e-flat">Action</button>
                  <button type="button" class="btn btn-success e-flat dropdown-toggle" data-toggle="dropdown">
                    <span class="caret" />
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" />
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
                <div class="btn-group">
                  <button type="button" class="btn btn-warning e-flat">Action</button>
                  <button type="button" class="btn btn-warning e-flat dropdown-toggle" data-toggle="dropdown">
                    <span class="caret" />
                    <span class="sr-only">Toggle Dropdown</span>
                  </button>
                  <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider" />
                    <li><a href="#">Separated link</a></li>
                  </ul>
                </div>
              </div>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- end split buttons card -->

          <!-- social buttons -->
          <div class="card card-warning">
            <div class="card-header">
              <h3 class="card-title">
                Social Buttons (By <a href="https://github.com/lipis/bootstrap-social">Lipis</a>)
              </h3>
            </div>
            <div class="card-body">
              <a class="btn btn-block btn-social btn-bitbucket">
                <font-awesome-icon icon="bitbucket" />
                Sign in with Bitbucket
              </a>
              <a class="btn btn-block btn-social btn-dropbox">
                <font-awesome-icon icon="dropbox" />
                Sign in with Dropbox
              </a>
              <a class="btn btn-block btn-social btn-facebook">
                <font-awesome-icon icon="facebook" />
                Sign in with Facebook
              </a>
              <a class="btn btn-block btn-social btn-flickr">
                <font-awesome-icon icon="flickr" />
                Sign in with Flickr
              </a>
              <a class="btn btn-block btn-social btn-foursquare">
                <font-awesome-icon icon="foursquare" />
                Sign in with Foursquare
              </a>
              <a class="btn btn-block btn-social btn-github">
                <font-awesome-icon icon="github" />
                Sign in with GitHub
              </a>
              <a class="btn btn-block btn-social btn-google">
                <font-awesome-icon icon="google-plus" />
                Sign in with Google
              </a>
              <a class="btn btn-block btn-social btn-instagram">
                <font-awesome-icon icon="instagram" />
                Sign in with Instagram
              </a>
              <a class="btn btn-block btn-social btn-linkedin">
                <font-awesome-icon icon="linkedin" />
                Sign in with LinkedIn
              </a>
              <a class="btn btn-block btn-social btn-tumblr">
                <font-awesome-icon icon="tumblr" />
                Sign in with Tumblr
              </a>
              <a class="btn btn-block btn-social btn-twitter">
                <font-awesome-icon icon="twitter" />
                Sign in with Twitter
              </a>
              <a class="btn btn-block btn-social btn-vk">
                <font-awesome-icon icon="vk" />
                Sign in with VK
              </a>
              <br />

              <div class="text-center">
                <a class="btn btn-social-icon btn-bitbucket">
                  <font-awesome-icon icon="bitbucket" />
                </a>
                <a class="btn btn-social-icon btn-dropbox">
                  <font-awesome-icon icon="dropbox" />
                </a>
                <a class="btn btn-social-icon btn-facebook">
                  <font-awesome-icon icon="facebook" />
                </a>
                <a class="btn btn-social-icon btn-flickr">
                  <font-awesome-icon icon="flickr" />
                </a>
                <a class="btn btn-social-icon btn-foursquare">
                  <font-awesome-icon icon="foursquare" />
                </a>
                <a class="btn btn-social-icon btn-github">
                  <font-awesome-icon icon="github" />
                </a>
                <a class="btn btn-social-icon btn-google">
                  <font-awesome-icon icon="google-plus" />
                </a>
                <a class="btn btn-social-icon btn-instagram">
                  <font-awesome-icon icon="instagram" />
                </a>
                <a class="btn btn-social-icon btn-linkedin">
                  <font-awesome-icon icon="linkedin" />
                </a>
                <a class="btn btn-social-icon btn-tumblr">
                  <font-awesome-icon icon="tumblr" />
                </a>
                <a class="btn btn-social-icon btn-twitter">
                  <font-awesome-icon icon="twitter" />
                </a>
                <a class="btn btn-social-icon btn-vk">
                  <font-awesome-icon icon="vk" />
                </a>
              </div>
            </div>
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
        <div class="col-md-6">
          <!-- Application buttons -->
          <div class="box">
            <div class="card-header">
              <h3 class="card-title">Application Buttons</h3>
            </div>
            <div class="card-body">
              <p>Add the classes <code>.btn.btn-app</code> to an <code>&lt;a></code> tag to achieve the following:</p>
              <a class="btn btn-app">
                <font-awesome-icon icon="edit" />
                Edit
              </a>
              <a class="btn btn-app">
                <font-awesome-icon icon="play" />
                Play
              </a>
              <a class="btn btn-app">
                <font-awesome-icon icon="repeat" />
                Repeat
              </a>
              <a class="btn btn-app">
                <font-awesome-icon icon="pause" />
                Pause
              </a>
              <a class="btn btn-app">
                <font-awesome-icon icon="save" />
                Save
              </a>
              <a class="btn btn-app">
                <span class="badge bg-warning">3</span>
                <font-awesome-icon icon="bullhorn" />
                Notifications
              </a>
              <a class="btn btn-app">
                <span class="badge bg-success">300</span>
                <font-awesome-icon icon="barcode" />
                Products
              </a>
              <a class="btn btn-app">
                <span class="badge bg-purple">891</span>
                <font-awesome-icon icon="users" />
                Users
              </a>
              <a class="btn btn-app">
                <span class="badge bg-teal">67</span>
                <font-awesome-icon icon="inbox" />
                Orders
              </a>
              <a class="btn btn-app">
                <span class="badge bg-info">12</span>
                <font-awesome-icon icon="envelope" />
                Inbox
              </a>
              <a class="btn btn-app">
                <span class="badge bg-danger">531</span>
                <font-awesome-icon icon="heart-o" />
                Likes
              </a>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
          <!-- Various colors -->
          <div class="box">
            <div class="card-header">
              <h3 class="card-title">Different colors</h3>
            </div>
            <div class="card-body">
              <p>
                Mix and match with various background colors. Use base class <code>.btn</code> and add any available
                <code>.bg-*</code> class
              </p>
              <!-- You may notice a .margin class added
							here but that's only to make the content
							display correctly without having to use a table-->
              <p>
                <button type="button" class="btn bg-maroon e-flat margin">.btn.bg-maroon.e-flat</button>
                <button type="button" class="btn bg-purple e-flat margin">.btn.bg-purple.e-flat</button>
                <button type="button" class="btn bg-navy e-flat margin">.btn.bg-navy.e-flat</button>
                <button type="button" class="btn bg-orange e-flat margin">.btn.bg-orange.e-flat</button>
                <button type="button" class="btn bg-olive e-flat margin">.btn.bg-olive.e-flat</button>
              </p>

              <p>
                <button type="button" class="btn bg-maroon margin">.btn.bg-maroon</button>
                <button type="button" class="btn bg-purple margin">.btn.bg-purple</button>
                <button type="button" class="btn bg-navy margin">.btn.bg-navy</button>
                <button type="button" class="btn bg-orange margin">.btn.bg-orange</button>
                <button type="button" class="btn bg-olive margin">.btn.bg-olive</button>
              </p>
            </div>
          </div>
          <!-- /.card -->

          <!-- Vertical grouping -->
          <div class="box">
            <div class="card-header">
              <h3 class="card-title">Vertical Button Group</h3>
            </div>
            <div class="card-body table-responsive pad">
              <p>
                Vertical button groups are easy to create with bootstrap. Just add your buttons inside
                <code>&lt;div class="btn-group-vertical"&gt;&lt;/div&gt;</code>
              </p>

              <table class="table table-bordered table-sm">
                <tr>
                  <th>Button</th>
                  <th>Icons</th>
                  <th>Flat</th>
                  <th>Dropdown</th>
                </tr>
                <!-- Default -->
                <tr>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-default">Top</button>
                      <button type="button" class="btn btn-default">Middle</button>
                      <button type="button" class="btn btn-default">Bottom</button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-default"><font-awesome-icon icon="align-left" /></button>
                      <button type="button" class="btn btn-default"><font-awesome-icon icon="align-center" /></button>
                      <button type="button" class="btn btn-default"><font-awesome-icon icon="align-right" /></button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-default e-flat">
                        <font-awesome-icon icon="align-left" />
                      </button>
                      <button type="button" class="btn btn-default e-flat">
                        <font-awesome-icon icon="align-center" />
                      </button>
                      <button type="button" class="btn btn-default e-flat">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-default">1</button>
                      <button type="button" class="btn btn-default">2</button>

                      <div class="btn-group">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                          <span class="caret" />
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown link</a></li>
                          <li><a href="#">Dropdown link</a></li>
                        </ul>
                      </div>
                    </div>
                  </td>
                </tr>
                <!-- ./default -->
                <!-- Info -->
                <tr>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-info">Top</button>
                      <button type="button" class="btn btn-info">Middle</button>
                      <button type="button" class="btn btn-info">Bottom</button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-info">
                        <font-awesome-icon icon="align-left" />
                      </button>
                      <button type="button" class="btn btn-info"><font-awesome-icon icon="align-center" /></button>
                      <button type="button" class="btn btn-info">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-info e-flat"><font-awesome-icon icon="align-left" /></button>
                      <button type="button" class="btn btn-info e-flat">
                        <font-awesome-icon icon="align-center" />
                      </button>
                      <button type="button" class="btn btn-info e-flat">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-info">1</button>
                      <button type="button" class="btn btn-info">2</button>

                      <div class="btn-group">
                        <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
                          <span class="caret" />
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown link</a></li>
                          <li><a href="#">Dropdown link</a></li>
                        </ul>
                      </div>
                    </div>
                  </td>
                </tr>
                <!-- /. info -->
                <!-- /.danger -->
                <tr>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-danger">Top</button>
                      <button type="button" class="btn btn-danger">Middle</button>
                      <button type="button" class="btn btn-danger">Bottom</button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-danger"><font-awesome-icon icon="align-left" /></button>
                      <button type="button" class="btn btn-danger"><font-awesome-icon icon="align-center" /></button>
                      <button type="button" class="btn btn-danger"><font-awesome-icon icon="align-right" /></button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-danger e-flat">
                        <font-awesome-icon icon="align-left" />
                      </button>
                      <button type="button" class="btn btn-danger e-flat">
                        <font-awesome-icon icon="align-center" />
                      </button>
                      <button type="button" class="btn btn-danger e-flat">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-danger">1</button>
                      <button type="button" class="btn btn-danger">2</button>

                      <div class="btn-group">
                        <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
                          <span class="caret" />
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown link</a></li>
                          <li><a href="#">Dropdown link</a></li>
                        </ul>
                      </div>
                    </div>
                  </td>
                </tr>
                <!-- /.danger -->
                <!-- warning -->
                <tr>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-warning">Top</button>
                      <button type="button" class="btn btn-warning">Middle</button>
                      <button type="button" class="btn btn-warning">Bottom</button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-warning"><font-awesome-icon icon="align-left" /></button>
                      <button type="button" class="btn btn-warning"><font-awesome-icon icon="align-center" /></button>
                      <button type="button" class="btn btn-warning"><font-awesome-icon icon="align-right" /></button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-warning e-flat">
                        <font-awesome-icon icon="align-left" />
                      </button>
                      <button type="button" class="btn btn-warning e-flat">
                        <font-awesome-icon icon="align-center" />
                      </button>
                      <button type="button" class="btn btn-warning e-flat">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-warning">1</button>
                      <button type="button" class="btn btn-warning">2</button>

                      <div class="btn-group">
                        <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown">
                          <span class="caret" />
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown link</a></li>
                          <li><a href="#">Dropdown link</a></li>
                        </ul>
                      </div>
                    </div>
                  </td>
                </tr>
                <!-- /.warning -->
                <!-- success -->
                <tr>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-success">Top</button>
                      <button type="button" class="btn btn-success">Middle</button>
                      <button type="button" class="btn btn-success">Bottom</button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-success"><font-awesome-icon icon="align-left" /></button>
                      <button type="button" class="btn btn-success"><font-awesome-icon icon="align-center" /></button>
                      <button type="button" class="btn btn-success"><font-awesome-icon icon="align-right" /></button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-success e-flat">
                        <font-awesome-icon icon="align-left" />
                      </button>
                      <button type="button" class="btn btn-success e-flat">
                        <font-awesome-icon icon="align-center" />
                      </button>
                      <button type="button" class="btn btn-success e-flat">
                        <font-awesome-icon icon="align-right" />
                      </button>
                    </div>
                  </td>
                  <td>
                    <div class="btn-group-vertical">
                      <button type="button" class="btn btn-success">1</button>
                      <button type="button" class="btn btn-success">2</button>

                      <div class="btn-group">
                        <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown">
                          <span class="caret" />
                        </button>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown link</a></li>
                          <li><a href="#">Dropdown link</a></li>
                        </ul>
                      </div>
                    </div>
                  </td>
                </tr>
                <!-- /.success -->
              </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /. row -->
    </section>
  </div>
</template>

<script>
export default {
  name: 'Buttons',
};
</script>

<style scoped></style>
